<template>
  <div class="drag-content">
    <div class="top-content" id="top-content">
      <!-- 上部分内容 -->
      <div class="top-content-box">
        <slot name="top-box"> </slot>
      </div>
      <div class="resize" id="resize" title="收缩栏">···</div>
    </div>
    <!-- 下部分内容 -->
    <div class="bottom-content" id="bottom-content">
      <slot name="bottom-box"> </slot>
    </div>
  </div>
</template>

<script setup>
import { nextTick } from 'vue'

const dragControllerDiv = () => {
  let top = document.getElementById('top-content')
  let line = document.getElementById('resize')
  let bottom = document.getElementById('bottom-content')

  // 鼠标按下事件
  line.onmousedown = function (e) {
    // debugger
    // 点击的元素初始位置
    let startY = e.clientY
    line.top = line.offsetTop
    // 鼠标拖动事件
    document.onmousemove = function (e) {
      let moveLen = line.top + (e.clientY - startY)
      if (
        moveLen >= document.body.clientHeight * 0.1 &&
        moveLen <= document.body.clientHeight * 0.8
      ) {
        line.style.top = moveLen + 'px'
        top.style.height = moveLen + 'px'
        bottom.style.height = document.body.clientHeight - moveLen + 'px'
      }
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
}
nextTick(() => {
  dragControllerDiv()
})
</script>

<style scoped lang="less">
.drag-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .top-content {
    position: relative;
    height: 300px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
    border-radius: 4px;
    vertical-align: top;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 10px 0 0 10px;
    margin-right: 8px;
    .top-content-box {
      height: calc(100% - 10px);
    }
  }
  .resize {
    cursor: row-resize;
    position: absolute;
    top: 100%;
    text-align: center;
    line-height: 10px;
    right: 50%;
    background-color: #d6d6d6;
    border-radius: 5px;
    margin-top: -5px;
    width: 50px;
    height: 10px;
    background-size: cover;
    background-position: 50%;
    font-size: 25px;
    color: #fff;
  }
  .bottom-content {
    height: calc(100% - 300px);
    width: 100%;
    background: #fff;
    -webkit-box-shadow: 0 0 2px 2px rgba(112, 81, 81, 0.051);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    vertical-align: top;
    overflow: auto;
  }
}
</style>
